<template>
  <el-table-column
    v-if="!col.children"
    :label="col.label"
    :prop="col.prop || ''"
    v-bind="{ ...columnDefaultComputed, ...col }"
  >
    <template #header>
      <slot v-if="col.headerSlot" :name="col.headerSlot" />
      <template v-else>{{ col.label }}</template>
    </template>
    <template #default="scope">
      <slot v-if="col.slotName" :name="col.slotName" v-bind="scope" />
      <template v-else-if="col.render">
        <renderCom
          v-if="col.render"
          :column="scope.column"
          :row="scope.row"
          :render="col.render"
        />
      </template>
      <template v-else-if="col.formatter">
        <span>{{
          col.formatter(scope.row, col, scope.row[col.prop], scope.$index)
        }}</span>
      </template>
      <span v-else>{{
        typeof scope.row[col.prop] !== "number" && !scope.row[col.prop]
          ? "--"
          : scope.row[col.prop]
      }}</span>
    </template>
  </el-table-column>

  <el-table-column
    v-else
    :label="col.label"
    v-bind="{ ...columnDefaultComputed, ...col }"
  >
    <columnComponent
      v-for="t in col.children"
      :key="t.prop"
      :col="t"
      :default="columnDefaultComputed"
    >
      <template v-for="slot in Object.keys($slots)" #[slot]="scope">
        <slot :name="slot" v-bind="scope" />
      </template>
    </columnComponent>
  </el-table-column>
</template>

<script>
import renderCom from "./render";

export default {
  name: "columnComponent",
  components: { renderCom },
  props: {
    col: {
      type: Object,
      default: () => {},
    },
    default: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      columnDefault: {
        "show-overflow-tooltip": true,
        resizeable: true,
        align: "center",
        minWidth: 100,
      },
    };
  },
  computed: {
    columnDefaultComputed() {
      return { ...this.columnDefault, ...this.default };
    },
  },
};
</script>

<style scoped lang="scss"></style>
